<!-- 题目查看组件 -->
<template>
  <div class="topic-item-panel">
    <template v-if="topicItemInfo.questionType && topicItemInfo.questionType === 3">
      <p>{{topicItemInfo.articleTitle}}</p>
      <p>{{topicItemInfo.articleDes}}</p>
      <p v-html="topicItemInfo.articleCon"></p>
      <div v-for="(q, key) in topicItemInfo.questionList" :key="key" style="margin-bottom: 20px">
        <p class="question-tit" v-if="topicItemInfo.questionType && topicItemInfo.questionType === 2">
          {{q.value}}、
          <audio controls controlsList="nodownload" :src="`/video-dev${q.question}`"></audio>
          <span class="tip-class">{{ q.topicType === 1 ? '单选' : (q.topicType === 2 ? '多选' : '判断') }}</span>
        </p>
        <p class="question-tit" v-else>
          {{q.value}}、{{ q.question }}
          <span class="tip-class">{{ q.topicType === 1 ? '单选' : (q.topicType === 2 ? '多选' : '判断') }}</span>
        </p>
        <ul class="options-box">
          <li :class="['option-item', computedClass(item, q).classTip ]" v-for="(item, index) in q.options" :key="index">
            <p class="item-tit">{{item.num}}、{{ item.label }}</p>
            <div class="item-tip-icon">
              <!-- 单选、判断 -->
              <template v-if="[1, 3].includes(q.topicType)">
                <img v-if="q.rightAnswer === q.answer && item.isRight" class="check-tip" src="../../../assets/img/icon_right@2x.png" alt="right" />
                <img v-else-if="q.answer === item.value" class="check-tip" src="../../../assets/img/icon_wrong@2x.png" alt="wrong" />
              </template>
              <!-- 多选 -->
              <template v-if="q.topicType === 2">
                <img v-if="computedClass(item, q).tip === 1" class="check-tip" src="../../../assets/img/icon_right@2x.png" alt="right" />
                <img v-else-if="computedClass(item, q).tip === 2" class="check-tip" src="../../../assets/img/icon_wrong@2x.png" alt="wrong" />
              </template>
            </div>
          </li>
        </ul>
        <!-- 回答的答案和正确答案一致 -->
        <p v-if="q.answer === q.rightAnswer" class="answer-right">回答正确 <span>得分：{{ q.score }}分</span></p>
        <p v-else class="answer-wrong">正确答案：<span>{{ q.rightAnswerLabel }}</span> 得分：<span>{{ q.score }}</span></p>
        <p>解析：{{q.analyze}}</p>
      </div>
    </template>
    <template v-else>
      <p class="question-tit" v-if="topicItemInfo.questionType && topicItemInfo.questionType === 2">
        {{topicItemInfo.value}}、
        <audio controls controlsList="nodownload" :src="`/video-dev${topicItemInfo.question}`"></audio>
        <span class="tip-class">{{ topicItemInfo.topicType === 1 ? '单选' : (topicItemInfo.topicType === 2 ? '多选' : '判断') }}</span>
      </p>
      <p class="question-tit" v-else>
        {{topicItemInfo.value}}、{{ topicItemInfo.question }}
        <span class="tip-class">{{ topicItemInfo.topicType === 1 ? '单选' : (topicItemInfo.topicType === 2 ? '多选' : '判断') }}</span>
      </p>
      <ul class="options-box">
        <li :class="['option-item', computedClass(item, topicItemInfo).classTip ]" v-for="(item, index) in topicItemInfo.options" :key="index">
          <p class="item-tit">{{item.num}}、{{ item.label }}</p>
          <div class="item-tip-icon">
            <!-- 单选、判断 -->
            <template v-if="[1, 3].includes(topicItemInfo.topicType)">
              <img v-if="topicItemInfo.rightAnswer === topicItemInfo.answer && item.isRight" class="check-tip" src="../../../assets/img/icon_right@2x.png" alt="right" />
              <img v-else-if="topicItemInfo.answer === item.value" class="check-tip" src="../../../assets/img/icon_wrong@2x.png" alt="wrong" />
            </template>
            <!-- 多选 -->
            <template v-if="topicItemInfo.topicType === 2">
              <img v-if="computedClass(item, topicItemInfo).tip === 1" class="check-tip" src="../../../assets/img/icon_right@2x.png" alt="right" />
              <img v-else-if="computedClass(item, topicItemInfo).tip === 2" class="check-tip" src="../../../assets/img/icon_wrong@2x.png" alt="wrong" />
            </template>
          </div>
        </li>
      </ul>
      <!-- 回答的答案和正确答案一致 -->
      <p v-if="topicItemInfo.answer === topicItemInfo.rightAnswer" class="answer-right">回答正确 <span>得分：{{ topicItemInfo.score }}分</span></p>
      <p v-else class="answer-wrong">正确答案：<span>{{ topicItemInfo.rightAnswerLabel }}</span> 得分：<span>{{ topicItemInfo.score }}</span></p>
      <p>解析：{{topicItemInfo.analyze}}</p>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    topicItemInfo: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    computedClass (item, q) {
      const answer = q.answer
      let rightAnswer = q.rightAnswer
      // rightAnswer = (q.topicType === 1 || q.topicType === 3) ? null : []
      let classTip = '' //  '' 不加背景 right-style 蓝色背景 wrong-style 红色背景
      let tip = 0 // 0 不标记 1 对勾 2 叉
      if ([1, 3].includes(q.topicType)) { // 单选、判断
        if (rightAnswer === answer && item.isRight) { // 答对
          classTip = 'right-style'
        } else if (answer === item.value) { // 答错
          classTip = 'wrong-style'
        }
      } else if (q.topicType === 2) { // 多选
        // 如果用户选择与正确答案一致，则将选项标蓝即可
        if (answer === rightAnswer) {
          if (answer.includes(item.value)) {
            classTip = 'right-style'
            tip = 1
          } else {
            classTip = ''
            tip = 0
          }
        } else {
          if (answer.includes(item.value)) {
            classTip = 'wrong-style'
            tip = 2
          } else {
            classTip = ''
            tip = 0
          }
        }
        // // 如果用户选择的ABCD，答案是BCD，则A标红，BCD标蓝（用户选多了）
        // if ((answer && answer.length > rightAnswer && rightAnswer.length) && rightAnswer.every(r => answer.includes(r))) {
        //   if (rightAnswer.includes(item.value)) {
        //     classTip = 'right-style'
        //     tip = 1
        //   } else if (!rightAnswer.includes(item.value) && answer.includes(item.value)) {
        //     classTip = 'wrong-style'
        //     tip = 2
        //   } else {
        //     classTip = ''
        //     tip = 0
        //   }
        // }
        // // 用户选择AC，正确答案为ABC，则AC标蓝，B不做处理，D也不做处理（用户选少了）
        // if ((answer && answer.length < rightAnswer && rightAnswer.length) && answer.every(r => rightAnswer.includes(r))) {
        //   if (answer.includes(item.value)) {
        //     classTip = 'right-style'
        //     tip = 1
        //   } else {
        //     classTip = ''
        //     tip = 0
        //   }
        // }
        // 用户选择 ABC，但是正确答案是BCD，A标红，BC标蓝，D不做处理
        // if (answer !== rightAnswer) {
        //   if (answer.includes(item.value) && rightAnswer.includes(item.value)) {
        //     classTip = 'right-style'
        //     tip = 1
        //   } else if (answer.includes(item.value) && !rightAnswer.includes(item.value)) {
        //     classTip = 'wrong-style'
        //     tip = 2
        //   } else if (!answer.includes(item.value) && !rightAnswer.includes(item.value)) {
        //     classTip = ''
        //     tip = 0
        //   }
        // }
      }
      return {
        classTip,
        tip
      }
    }
  }
}
</script>
<style lang="less" scoped>
.topic-item-panel {
  width: 100%;
  .question-tit {
    color: #333;
    font-size: 16px;
    margin-bottom: 14px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: bold;
    color: #333333;
    line-height: 24px;
    display: flex;
    align-items: center;
    .tip-class {
      margin-top: -2px;
      display: inline-block;
      width: 34px;
      height: 18px;
      text-align: center;
      border-radius: 3px;
      font-size: 13px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      line-height: 19px;
      color: #FFFFFF;
      word-break: keep-all;
      background: #037CE4;
      margin-left: 10px;
    }
  }
  .options-box {
    width: 100%;
    .option-item {
      width: 100%;
      background: #F7F8F9;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid transparent;
      box-sizing: border-box;
      &:last-child {
        margin-bottom: 0;
      }
      .item-tit {
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
        white-space:pre-wrap;
      }
      .item-tip-icon {
        flex-shrink: 0;
        margin-left: 16px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        .check-tip {
          width: 100%;
          height: 100%;
        }
      }
    }
    // 单选题和多选题
    .option-item-active {
      background: #4575E8;
      .item-tit {
        color: #fff;
      }
    }
    // 答题正确
    .right-style {
      background: #E9F5FF;
      .item-tit {
        color: #037CE4;
      }
    }
    // 答题错误
    .wrong-style {
      background: #FFF0F0;
      .item-tit {
        color: #E73A39;
      }
    }
  }
  .answer-right {
    margin-top: 10px;
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: bold;
    color: #00C392;
    line-height: 22px;
  }
  .answer-wrong {
    margin-top: 10px;
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: bold;
    color: #333333;
    line-height: 22px;
    span {
      font-size: 16px;
      font-family: Arial-BoldMT, Arial;
      font-weight: bold;
      color: #E8403F;
      line-height: 22px;
    }
  }
}
</style>
